<template>
  <div class="index">
    <top></top>
    <div class="index1">
      <div class="index2">
        <swiper :options="swiperOptions" style="width:100%">
          <swiper-slide class="index3" v-for="(item,index) in type" :key="index">
            <img @click="changeType(item.id)" :src="$store.state.HOST + item.image">
            <div @click="changeType(item.id)" style="color:#4F4F4F;font-size:13px">{{item.name}}</div>
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev">
              <div class="index5">
                  <div class="index6">
                      <i class="el-icon-back"></i>
                  </div>
              </div>
          </div>
          <div class="swiper-button-next" slot="button-next">
              <div class="index5">
                  <div class="index6">
                      <i class="el-icon-right"></i>
                  </div>
              </div>
          </div>
        </swiper>
      </div>
    </div>
    <div class="index7">
      <div class="index8">
        <swiper :options="swiperOptionsTwo" style="width:100%">
          <swiper-slide class="index9" v-for="(item,index) in restaurant" :key="index">
            <img @click="toRest(item.id)" :src="item.image.split(',')[0]">
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev">
              <div class="index5">
                  <div class="index6">
                      <i class="el-icon-back"></i>
                  </div>
              </div>
          </div>
          <div class="swiper-button-next" slot="button-next">
              <div class="index5">
                  <div class="index6">
                      <i class="el-icon-right"></i>
                  </div>
              </div>
          </div>
        </swiper>
      </div>
    </div>
    <div class="index10">
      <div class="index11">
        <div class="index12">
          <div>最多收藏</div>
          <div class="index15" @click="toFood">查看更多</div>
        </div>
        <div class="index13">
          <el-empty v-if="favor.length <= 0" style="font-family:'黑体';width:100%" description="暂无数据"></el-empty>
          <div v-if="favor.length > 0" class="index14" v-for="(item,index) in favor" :key="index" @click="toFoodInfo(item.id)">
            <div class="index16">
              <img :src="item.image.split(',')[0]">
              <div class="index17" @click.stop="saveFoodFavor(item.id)">
                <i style="color:#DC3545" class="el-icon-star-off"></i>
              </div>
              <div class="index18">
                <i class="el-icon-star-off"></i> ({{item.favor}}+)
              </div>
              <div class="index19">
                {{index + 1}}
              </div>
            </div>
            <div class="index20">
              <div class="index21">
                <div class="index22">{{item.name}}</div>
                <div class="index23">{{item.address}}</div>
                <div class="index24">营业时间:{{item.open}}</div>
                <div class="index25">{{item.comment}}<i class="el-icon-s-comment"></i></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="index10">
      <div class="index11">
        <div class="index12">
          <div>最多浏览</div>
          <div class="index15" @click="toFood">查看更多</div>
        </div>
        <div class="index27">
          <el-empty v-if="look.length <= 0" style="font-family:'黑体';width:100%" description="暂无数据"></el-empty>
          <div v-if="look.length > 0" class="index26" v-for="(item,index) in look" :key="index" @click="toFoodInfo(item.id)">
            <div class="index28">
              <img :src="item.image.split(',')[0]">
              <div class="index17" @click.stop="saveFoodFavor(item.id)">
                <i style="color:#DC3545" class="el-icon-star-off"></i>
              </div>
              <div class="index18">
                <i class="el-icon-star-off"></i> ({{item.favor}}+)
              </div>
              <div class="index19">
                {{index + 1}}
              </div>
            </div>
            <div class="index29">
              <div class="index30">
                <div class="index31">{{item.name}}</div>
                <div class="index32">
                  <el-rate disabled v-model="item.star"></el-rate>
                </div>
                <div class="index32">营业时间:{{item.open}}</div>
                <div class="index25">{{item.comment}}<i class="el-icon-s-comment"></i></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="index10">
      <div class="index11">
        <div class="index12">
          <div>最多评论</div>
          <div class="index15" @click="toFood">查看更多</div>
        </div>
        <div class="index27">
          <el-empty v-if="comment.length <= 0" style="font-family:'黑体';width:100%" description="暂无数据"></el-empty>
          <div v-if="comment.length > 0" class="index33" v-for="(item,index) in comment" :key="index" @click="toFoodInfo(item.id)">
            <div class="index34">
              <img :src="item.image.split(',')[0]">
            </div>
            <div class="index35">
              <div class="index36">
                <div class="index22">{{item.name}}</div>
                <div class="index23">{{item.address}}</div>
                <div class="index24">营业时间:{{item.open}}</div>
                <div class="index25">{{item.comment}}<i class="el-icon-s-comment"></i></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import top from '@/components/top'
  import bottom from '@/components/bottom'
  import {saveFoodFavor,getFoodListByComment,getFoodListByLook,getFoodTypeList,getFoodSchoolList,getFoodRestaurantBySchool,getFoodListByFavor} from '../../api/api'
  export default {
    data() {
      return{
        user: {},
        school: "",
        schoolId: "",
        type: [],
        favor: [],
        look: [],
        comment: [],
        restaurant: [],
        value1: 5,
        swiperOptions: {
          loop: true,
          slidesPerView: 8,
          navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
          },
        },
        swiperOptionsTwo: {
          loop: true,
          slidesPerView: 4,
          navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
          },
        }
      }
    },
    methods: {
      saveFoodFavor(id) {
        var param = {
          listId: id
        }
        saveFoodFavor(param).then(res => {
          if (res.code == 1000) {
            this.$message({
              message: "收藏成功",
              type: 'success'
            });
            this.getFoodListByFavor()
            this.getFoodListByComment()
            this.getFoodListByLook()
          } else {
            this.$message({
              message: res.message,
              type: 'warning'
            });
          }
        })
      },
      changeType(id) {
        this.$router.push("/food?typeId=" + id)
      },
      toFood() {
        this.$router.push("/food")
      },
      toFoodInfo(id) {
        this.$router.push("/foodInfo?id=" + id)
      },
      toRest(id) {
        this.$router.push("/restaurantInfo?id=" + id)
      },
      getFoodListByComment() {
        getFoodListByComment({school: this.schoolId}).then(res => {
          if (res.code == 1000) {
            this.comment = res.data
          }
        })
      },
      getFoodListByFavor() {
        getFoodListByFavor({school: this.schoolId}).then(res => {
          if (res.code == 1000) {
            this.favor = res.data
          }
        })
      },
      getFoodListByLook() {
        getFoodListByLook({school: this.schoolId}).then(res => {
          if (res.code == 1000) {
            this.look = res.data
          }
        })
      },
      getFoodRestaurantBySchool() {
        getFoodRestaurantBySchool({school: this.schoolId}).then(res => {
          if (res.code == 1000) {
            this.restaurant = res.data
          }
        })
      },
      getFoodTypeList() {
        getFoodTypeList().then(res => {
          if (res.code == 1000) {
            this.type = res.data
          }
        })
      },
    },
    components: {
        top,
        bottom,
        swiper,
        swiperSlide,
    },
    created() {
     
    },
    mounted() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
      this.user = JSON.parse(window.localStorage.getItem("user_info"))
      this.school = this.user.school
      this.schoolId = this.user.schoolId
      this.getFoodRestaurantBySchool()
      this.getFoodListByFavor()
      this.getFoodListByLook()
      this.getFoodListByComment()
      this.getFoodTypeList()
    }
 }
</script>

<style scoped>
@import url('../../assets/css/index.css');
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  background: none;
  left: 0;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  background: none;
  right: 0;
}
</style>